<template>
  <div>
    <!-- 测试 -->
    <el-cascader
      :options="state.options"
      style="width:100%"
      :clearable="true"
      filterable
      v-model="state.value"
      @change="handleChange"
    ></el-cascader>
  </div>
</template>
<script lang="ts">
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
interface State {
  /** 数据状态 */
  loading: boolean;
  options: any;
  value: any;
}
@Component
export default class Index extends Vue {
  @Prop() value!: string;
  /** 数据 */
  state: State = {
    loading: false,
    options: [],
    value: '',
  };
  /** 生命周期 */
  mounted() {
    this.test();
  }

  test() {
    const organizationUnit = JSON.parse(
      localStorage.getItem('commonDatas') as string
    ).organizationUnit;

    // 筛选一级部门
    // const or = organizationUnit.filter(
    //   (item: any) => item.code.split('.').length == 1
    // );
    organizationUnit.forEach((item: any) => {
      // 筛选一级部门
      if (!item.parentId) {
        this.state.options.push({
          id: item.id,
          value: item.displayName,
          label: item.displayName,
          children: [],
        });
      }
      // this.recursionOrg(this.state.options, item.id, organizationUnit);
    });

    // 传入原始数据newArry
    const result = this.generateOptions(organizationUnit);
    this.state.options = result;

    // this.orgsUser();

    //将处理后的数据，赋值给级联选择器
  }
  // 开始递归方法
  generateOptions(params: any) {
    const result = [];
    for (const param of params) {
      if (!param.parentId) {
        // 判断是否为顶层节点
        const parent: any = {
          value: param.displayName,
          label: param.displayName,
        };
        parent.children = this.getchilds(param.id, params); // 获取子节点
        result.push(parent);
      }
    }
    return result;
  }

  getchilds(value: any, array: any) {
    const childs: any = [];
    for (const arr of array) {
      // 循环获取子节点
      if (arr.parentId === value) {
        childs.push({
          id: arr.id,
          value: arr.displayName,
          label: arr.displayName,
        });
      }
    }
    for (const child of childs) {
      // 获取子节点的子节点
      const childscopy = this.getchilds(child.id, array); // 递归获取子节点
      if (childscopy.length > 0) {
        child.children = childscopy;
      }
    }
    return childs;
  }
  handleChange() {
    if (!this.state.value) return;
    this.state.value = this.state.value[this.state.value?.length - 1];

    this.$emit('input', this.state.value);
    this.$emit('change', this.state.value);
  }

  // 筛选部门的人
  orgsUser() {
    const users = JSON.parse(localStorage.getItem('commonDatas') as string)
      .users.items;

    // console.log(114, users);

    this.orgsUserFitler(this.state.options, users);
  }

  // 递归
  orgsUserFitler(arr: any, users: any) {
    arr.forEach((item: any) => {
      // 有children继续递归，没有则增加
      if (item.children?.length > 0) {
        this.orgsUserFitler(item.children, users);
      } else {
        item['children'] = [];
        users.forEach((element: any) => {
          if (element.organizationIds.includes(item.id)) {
            item.children.push({
              value: element.value,
              label: element.value,
            });
          }
        });
      }
    });
  }
  /** 方法 */
  /** 监听 */
  @Watch('value', { immediate: true })
  onValue(val: string) {
    this.state.value = val;
  }

  /** 计算属性 */
}
</script>
<style lang="scss" scoped></style>
